import React, {Component} from 'react';
import SshButton from '../../base/SshButton'
import SshInput from '../../base/SshInput'
import Counter from '../../base/Counter'
import './Counter.css'

export default class Welcome extends Component {
    constructor(props) {
        super(props)
        this.state = {
            number: 1,
            addNum: ''
        }
    }

    addCount = (e) => {
        this.counter.add(Number(this.state.addNum))
    }
    handleChange = (val) => {
        this.setState({
            addNum: val
        })
    }

    render() {
        const {addNum} = this.state
        return (
            <div className="Counter">
                <p>数量是：<Counter style={{color: '#f60', fontWeight: 700}} ref={ref => this.counter = ref}
                                value={this.state.number}/></p>
                <div>
                    <SshInput onChange={this.handleChange} value={addNum} style={{width: '60%', marginBottom: '10px'}}/>
                    <SshButton onClick={this.addCount}>点击增加</SshButton>
                </div>
            </div>
        )
    }
}
